<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../resource/vue.js"></script>
</head>

<body>
    <div id="app">
        <form @submit.prevent="send">
            用户名：<input type="text" v-model="user.username"><br><br>
            密码：<input type="password" v-model="user.password"><br><br>
            年龄：<input type="text" v-model.number="user.age"><br><br>
            性别：
                男：<input type="radio" name="gender" value="1" v-model="user.gender"><br>
                女：<input type="radio" name="gender" value="0" v-model="user.gender"><br>
            爱好：
                旅游：<input type="checkbox" v-model="user.interest" value="travel">
                运动：<input type="checkbox" v-model="user.interest" value="sport">
                唱歌：<input type="checkbox" v-model="user.interest" value="sing"><br>
            学历：
                <select v-model="user.grade">
                    <option value="">请选择学历</option>
                    <option value="zk">专科</option>
                    <option value="bk">本科</option>
                    <option value="ss">硕士</option>
                </select><br>
            简介：
                <textarea v-model.lazy="user.introduce" cols="50" rows="15"></textarea><br>
            <input type="checkbox" v-model="user.accept">阅读并接受协议<br>
            <button>注册</button>
        </form>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                user:{
                    username:'',
                    password:'',
                    age:'',
                    gender:'1',
                    interest:[],
                    grade:'',
                    accept:'',
                    introduce:''
                }
            },
            methods:{
                send(){
                    console.log(this.user);
                }
            }
        })
    </script>
</body>

</html>